$valList: 0,
2,
4,
6,
8,
10,
12,
14,
16,
18,
20,
22,
24,
26,
28,
30,
32,
34,
36,
38,
40,
42,
44,
46,
48,
50,
54,
56,
60,
64,
66,
68,
70,
72,
80,
88,
98,
100,
120,
136,
140,
148,
150,
155,
160,
176,
200,
220,
400;

@each $item in $valList {

  .m-#{$item} {
    margin-top: $item + rpx;
    margin-bottom: $item + rpx;
    margin-left: $item + rpx;
    margin-right: $item + rpx;
  }

  .my-#{$item} {
    margin-top: $item + rpx;
    margin-bottom: $item + rpx;
  }

  .mx-#{$item} {
    margin-left: $item + rpx;
    margin-right: $item + rpx;
  }

  .mt-#{$item} {
    margin-top: $item + rpx;
  }

  .mb-#{$item} {
    margin-bottom: $item + rpx;
  }

  .ml-#{$item} {
    margin-left: $item + rpx;
  }

  .mr-#{$item} {
    margin-right: $item + rpx;
  }

  .p-#{$item} {
    padding-top: $item + rpx;
    padding-bottom: $item + rpx;
    padding-left: $item + rpx;
    padding-right: $item + rpx;
  }

  .py-#{$item} {
    padding-top: $item + rpx;
    padding-bottom: $item + rpx;
  }

  .px-#{$item} {
    padding-left: $item + rpx;
    padding-right: $item + rpx;
  }

  .pt-#{$item} {
    padding-top: $item + rpx;
  }

  .pb-#{$item} {
    padding-bottom: $item + rpx;
  }

  .pl-#{$item} {
    padding-left: $item + rpx;
  }

  .pr-#{$item} {
    padding-right: $item + rpx;
  }

  .top-#{$item} {
    top: $item + rpx;
  }

  .top-minus-#{$item} {
    top:-$item + rpx;
  }

  .bottom-#{$item} {
    bottom: $item + rpx;
  }
	
  .bottom-minus-#{$item} {
    bottom: - $item + rpx;
  }

  .left-#{$item} {
    left: $item + rpx;
  }
  .left-minus-#{$item} {
    left:- $item + rpx;
  }

  .right-#{$item} {
    right: $item + rpx;
  }
  .right-minus-#{$item} {
    right: -$item + rpx;
  }
}
